<template>
  <div class="all">
    <table width="100%" cellspacing="0">
      <thead>
        <tr>
          <th width="1%"></th>
         <!-- <th width="40px">等级ID</th> -->
          <th width="12%">等级名称</th>
          <th width="10%">图标</th>
          <th width="15%">充值最小值</th>
          <th width="15%">充值最大值</th>
          <th >操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(val,name) in list">
          <td></td>
       <!--   <td><input type="text" size="3"  v-model="val.levelId"></td> -->
          <td><input type="text" style="width: 120px;"  v-model="val.name"></td>
          <td><img :src="val.picUrl" alt=""></td>
          <td><input type="text" style="width: 120px;" v-model="val.min"></td>
          <td><input type="text" style="width: 120px;" v-model="val.max"></td>
          <td><i @click="del(val)">删除</i></td>
        </tr>

        <tr>
        <td>增加</td>
         <!-- <td><input type="text" size="3" v-model="add.levelId"></td> -->
          <td><input type="text" style="width: 120px;" v-model="add.name"></td>
          <td><input type="file" @change="uploadPhoto($event)"></td>
          <td><input type="text" style="width: 120px;" v-model="add.min"></td>
          <td><input type="text" style="width: 120px;" v-model="add.max"></td>
          <td></td>
        </tr>
      </tbody>
    </table>
    <button @click="submit()">保存</button>
  </div>
</template>

<script>
  export default{
    inject:["reload"],
    data(){
      return{
        add:{},
        list:[],
        date:[]
      }
    },
    methods:{
      //提交

      submit(){
        var _this=this
        if(Object.keys(this.add).length==3&& Object.values(this.add).indexOf('')==-1){
          var reader = new FileReader();
          var file=this.date.file
          var data=[]
          reader.readAsDataURL(file);
          reader.onload = function (e) {
          data.imgcode = e.target.result.split(',')[1];
            data.name=_this.add.name
            data.picName=_this.date.file.name
          console.log(data)
          _this.upload(data).then(res=>{
            _this.add.picUrl=res
            _this.add.min=Number(_this.add.min)
            _this.add.max=Number(_this.add.max)
             _this.list.push(_this.add)
             console.log(_this.list)
              _this.Postdata('admin/duanwei/mod',_this.list)
          })
        }
        }else{
           this.Postdata('admin/duanwei/mod',_this.list)
        }
       },
       //上传
       uploadPhoto(e) {
             if (e.target.files[0].size > 3145728) {
                 // 图片大于3MB
                 this.$alert('照片质量大于3M', '提示', {
                    confirmButtonText: '确定',
                    callback: action => {}
                  });
             }else{this.date.file = e.target.files[0];}
       },
       upload(e){
         var _this=this
         return new Promise((resolve, reject)=>{
           this.$axios({
             method: "POST",
                 url: '/api/admin/duanwei/pic/upload',
                 headers:{'Content-Type': 'application/json'},
                 data: {
                       adminName:_this.$cookies.get('adminName'),
                       token:_this.$cookies.get('token'),
                       pic:e.imgcode,
                       picName:e.picName,
                       name:e.name
                       },
           }).then(res=>{
             if(res.data.code==0){
                console.log(res)
                resolve(res.data.data)
             }
           })
         })
       },
       del(val){
          var _this=this

             this.$confirm('此操作将删除'+val.name+', 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
          _this.$axios({
                method: "POST",
                url: '/api/admin/duanwei/delete',
                headers: {'Content-Type': 'application/json'},
                data: {   adminName:_this.$cookies.get('adminName'),
                          token:_this.$cookies.get('token'),
                          id:val.id
                      },
               }).then(function(res){
                 console.log(res)
                 if(res.data.code==0){
                   _this.$alert('操作成功', '提示', {
                      confirmButtonText: '确定',
                      callback: action => {
                        _this.reload()
                      }});
                 }else{
                   _this.$alert('操作失败,请重试', '提示', {
                      confirmButtonText: '确定',
                      callback: action => {
                        _this.reload()
                      }
                    });
                 }
               })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
       },
      Postdata(url,e){
        var _this=this
        console.log(e)
        if(Object.keys(e).length!=0){
          e.forEach(function(val,keys){
            val.id=Number(val.id)
            val.min=Number(val.min)
            val.max=Number(val.max)
          })
        }
        this.$axios({
                method: "POST",
                url: '/api/'+url,
                headers: {'Content-Type': 'application/json'},
                data: {   adminName:_this.$cookies.get('adminName'),
                          token:_this.$cookies.get('token'),
                         duanweis:e,
                      },
               }).then(function(res){
                 console.log(res)
                 if(res.data.code==0){
                   if(res.data.data!=null){
                     _this.list=res.data.data.duanweis
                   }else{
                     _this.$alert('操作成功', '提示', {
                        confirmButtonText: '确定',
                        callback: action => {
                          _this.reload()
                        }
                      });
                   }
                 }else{
                   _this.$alert('操作失败,请重试', '提示', {
                      confirmButtonText: '确定',
                      callback: action => {
                        if(res.data.code==2002){

                        }else{
                      
                        }

                      }
                    });
                 }
               })
      }
    },
    mounted(){

    this.Postdata('admin/duanwei/getAll',this.add)
    }
  }
</script>

<style scoped>
th{
      height: 30px;
      background: #eef3f7;
      border-bottom: 1px solid #d5dfe8;
      font-weight: normal;
}
td{
  border-bottom: #eee 1px solid;
      padding-top: 5px;
      padding-bottom: 5px;
      text-align: center;
}
td input{
margin: auto;
display: block;
text-align: center;
box-shadow:0 0 0 0 rgba(238,238,238,0.5)
}
img{
  width: 60px;
  height: 60px;
}
</style>
